<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用帮助 - 智慧考勤系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <style>
        .help-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .help-section {
            margin-bottom: 30px;
            background: white;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .help-section h2 {
            color: #2c3e50;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
            margin-top: 0;
        }
        .help-section h3 {
            color: #3498db;
            margin-top: 20px;
        }
        .help-section ul {
            padding-left: 20px;
        }
        .help-section li {
            margin-bottom: 8px;
        }
        .back-btn {
            display: inline-block;
            margin: 20px 0;
            padding: 10px 20px;
            background: #3498db;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            transition: background 0.3s;
        }
        .back-btn:hover {
            background: #2980b9;
        }
        .help-img {
            max-width: 100%;
            height: auto;
            margin: 15px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>智慧考勤系统 - 使用帮助</h1>
            <p class="subtitle">全面了解系统功能，高效使用智能考勤</p>
        </header>

        <main class="help-container">
            <a href="/" class="back-btn">返回首页</a>
            
            <section class="help-section">
                <h2>系统概述</h2>
                <p>智慧考勤系统是一套基于人脸识别和语音交互的智能考勤解决方案，旨在提高考勤管理的效率和准确性。系统主要功能包括：</p>
                <ul>
                    <li>人脸识别自动打卡</li>
                    <li>语音助手交互</li>
                    <li>请假申请管理</li>
                    <li>考勤数据统计分析</li>
                    <li>制度查询</li>
                </ul>
            </section>

            <section class="help-section">
                <h2>人脸识别打卡</h2>
                <h3>如何使用</h3>
                <ol>
                    <li>站在摄像头前，确保面部清晰可见</li>
                    <li>系统会自动识别您的面部并记录考勤</li>
                    <li>识别成功后，系统会显示您的姓名和打卡时间</li>
                </ol>
                
                <h3>注意事项</h3>
                <ul>
                    <li>请确保光线充足，避免逆光</li>
                    <li>请勿佩戴墨镜等遮挡面部的物品</li>
                    <li>如果多次识别失败，请联系管理员</li>
                </ul>
            </section>

            <section class="help-section">
                <h2>语音助手</h2>
                <h3>支持的语音指令</h3>
                <ul>
                    <li>"我要请假" - 跳转到请假申请页面</li>
                    <li>"查看考勤记录" - 查询个人考勤记录</li>
                    <li>"查询制度" - 跳转到制度查询页面</li>
                    <li>"帮助" - 显示使用帮助</li>
                </ul>
                
                <h3>使用技巧</h3>
                <ul>
                    <li>请使用清晰的普通话</li>
                    <li>保持安静的环境以提高识别率</li>
                    <li>语音指令简短明了效果最佳</li>
                </ul>
            </section>

            <section class="help-section">
                <h2>请假申请</h2>
                <h3>申请流程</h3>
                <ol>
                    <li>点击首页的"请假申请"按钮</li>
                    <li>填写请假类型、起止时间和请假原因</li>
                    <li>提交申请后等待审批</li>
                    <li>可在个人中心查看请假申请状态</li>
                </ol>
                
                <h3>请假类型说明</h3>
                <ul>
                    <li>病假：需提供医院证明</li>
                    <li>事假：需说明具体事由</li>
                    <li>年假：按公司规定的年假天数使用</li>
                    <li>其他：特殊情况，需详细说明原因</li>
                </ul>
            </section>

            <section class="help-section">
                <h2>人脸注册</h2>
                <h3>注册步骤</h3>
                <ol>
                    <li>点击首页的"人脸注册"按钮</li>
                    <li>填写个人信息（工号、姓名、部门、职位）</li>
                    <li>点击"拍照"按钮，确保面部清晰</li>
                    <li>确认信息无误后提交</li>
                </ol>
                
                <h3>注意事项</h3>
                <ul>
                    <li>请在光线充足的环境下进行注册</li>
                    <li>面部表情自然，不要佩戴墨镜等遮挡物</li>
                    <li>如需更新面部信息，请联系管理员</li>
                </ul>
            </section>

            <section class="help-section">
                <h2>常见问题</h2>
                <h3>人脸识别失败怎么办？</h3>
                <p>请确保光线充足，面部清晰可见。多次失败请联系管理员手动登记考勤。</p>
                
                <h3>如何修改个人信息？</h3>
                <p>请联系系统管理员进行修改。</p>
                
                <h3>忘记打卡怎么办？</h3>
                <p>请及时联系部门主管，填写考勤异常申请表。</p>
                
                <h3>系统使用中遇到技术问题？</h3>
                <p>请联系IT部门，电话：内线8888。</p>
            </section>
            
            <a href="/" class="back-btn">返回首页</a>
        </main>

        <footer>
            <p>&copy; 2023 智慧考勤系统 | <a href="/admin">管理员入口</a></p>
        </footer>
    </div>
</body>
</html> 